<template>
  <div>
    <div>
      <Head></Head>
    </div>
    <div class="Xseats">
      <div class="Xseats-wrap">
        <div class="Xseats-steps">
          <Steps :activeindex="activeindex"></Steps>
        </div>
        <div class="Xseats-main">
          <div class="seats">
            <Seats></Seats>
          </div>
          <div class="movie">
            <div class="movie-pic-wrap">
              <div class="movie-pic">
                <img
                  src="https://p1.meituan.net/movie/f6ec2a022d3644ef493f881d359f65303190471.jpg@115w_158h_1e_1c"
                />
              </div>
              <div class="movie-pic-msg">
                <div class="movie-pic-msg-title">如果声音不记得</div>
                <p>类型：<span>爱情</span></p>
                <p>时长：<span>102分钟</span></p>
              </div>
            </div>
            <div class="movie-info-wrap">
              <div>影院：<span>万达影城</span></div>
              <div>影厅：<span>5号儿童厅</span></div>
              <div>版本：<span>国语2D</span></div>
              <div>场次：<span class="redcolor">今天 12月21 20:10</span></div>
              <div>
                票价：<span>￥{{ price }}/张</span>
              </div>
            </div>
            <div class="movie-seat-wrap">
              <div class="movie-noseat" v-show="!xseatFlag">
                <p>座位：一次最多选6个座位</p>
                <p>请<span>点击左侧</span>座位图选择座位</p>
              </div>
              <div class="movie-hasseat" v-show="xseatFlag">
                <p>座位：</p>
                <div class="movie-seat-tag-wrap">
                  <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    closable
                    type="danger"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
              <div class="movie-seat-price">
                <span>总价：</span>
                <span>￥</span>
                <span>{{ totalprice }}</span>
              </div>
            </div>
            <div class="movie-phone-wrap">
              <p v-show="isLogin">手机号：<span>159****5519</span></p>
              <div :class="{ focusInp: focusInpPhone }" v-show="!isLogin">
                <input
                  v-model="phone"
                  type="text"
                  placeholder="输入手机号"
                  maxlength="11"
                  @focus="focusInpPhone = true"
                  @blur="focusInpPhone = false"
                  @input="getPhone"
                />
              </div>
              <div :class="{ focusInp: focusInpVerify }" v-show="!isLogin">
                <input
                  type="text"
                  placeholder="填写验证码"
                  maxlength="6"
                  @focus="focusInpVerify = true"
                  @blur="focusInpVerify = false"
                />
                <button :class="{ activeBtn: activeBtnFlag }">
                  获取验证码
                </button>
              </div>
              <div
                :class="['XseatBtn', xseatFlag ? 'confirmXseatBtn' : '']"
                @click="toOrder"
              >
                确认选座
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Xseats {
  margin-top: 80px;
  overflow: hidden;
}
.Xseats-wrap {
  width: 1200px;
  margin: 0 auto;
  .Xseats-steps {
    height: 60px;
    margin: 40px 0;
  }
  .Xseats-main {
    width: 1200px;
    border: 1px solid #e5e5e5;
    display: flex;
    margin-bottom: 50px;
    .seats {
      width: 820px;
    }
    .movie {
      width: 340px;
      padding: 20px;
      background-color: #f9f9f9;
      .movie-pic-wrap {
        display: flex;
        .movie-pic {
          width: 115px;
          height: 158px;
          margin-right: 20px;
          border: 2px solid #fff;
          -webkit-box-shadow: 0 2px 7px 0 hsla(0, 0%, 53%, 0.5);
          box-shadow: 0 2px 7px 0 hsla(0, 0%, 53%, 0.5);
          float: left;
        }
        .movie-pic-msg {
          .movie-pic-msg-title {
            font-size: 20px;
            font-weight: 700;
            color: #333;
            margin: 0 0 10px;
          }
          p {
            font-size: 12px;
            color: #999;
            height: 19px;
            line-height: 19px;
            span {
              color: #151515;
            }
          }
        }
      }
      .movie-info-wrap {
        margin-top: 20px;
        div {
          font-size: 14px;
          color: #999;
          margin-bottom: 9px;
          span {
            color: #151515;
          }
          .redcolor {
            color: red;
          }
        }
      }
      .movie-seat-wrap {
        padding: 20px 0 10px;
        border-top: 1px dashed #e5e5e5;
        border-bottom: 1px dashed #e5e5e5;
        .movie-noseat {
          p {
            &:first-child {
              font-size: 14px;
              color: #999;
            }
            &:last-child {
              font-size: 14px;
              color: #333;
              text-align: center;
              margin: 28px 0 39px;
              span {
                color: red;
              }
            }
          }
        }
        .movie-hasseat {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 20px;
          p {
            width: 43px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #999;
          }
          .movie-seat-tag-wrap {
            width: 297px;
            display: flex;
            flex-wrap: wrap;
            /deep/ .el-tag {
              margin-right: 10px;
              margin-bottom: 10px;
            }
          }
        }
        .movie-seat-price {
          span {
            &:first-child {
              font-size: 14px;
              color: #333;
            }
            &:nth-child(2) {
              font-size: 14px;
              color: red;
            }
            &:last-child {
              color: #f03d37;
              font-size: 24px;
            }
          }
        }
      }
      .movie-phone-wrap {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 25px;
        p {
          color: #999;
          font-size: 14px;
          span {
            color: #151515;
          }
        }
        div {
          width: 218px;
          height: 40px;
          padding: 0 20px;
          margin: 5px 0;
          border: 1px solid #e5e5e5;
          background-color: #fff;
          border-radius: 20px;
          position: relative;
          input {
            border: 0;
            outline: none;
            height: 40px;
            color: #333;
            font-size: 14px;
          }
          button {
            height: 40px;
            background-color: #fff;
            border: 0;
            outline: none;
            position: absolute;
            right: 20px;
            color: #ccc;
            font-size: 14px;
          }
          .activeBtn {
            color: red;
            cursor: pointer;
          }
        }
        .focusInp {
          border-color: red;
        }
        .XseatBtn {
          background-color: #dedede;
          color: #fff;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          border: 0;
          margin-top: 40px;
        }
        .confirmXseatBtn {
          box-shadow: 0 2px 10px -2px #f03d37;
          background-color: #f03d37;
        }
      }
    }
  }
}
</style>
<script>
import Steps from "../components/xseats/Steps";
import Seats from "../components/xseats/Seats";
import Head from "../components/home/header";
import Footer from "../components/home/homefooter";
import bus from "../bus/index";
export default {
  data() {
    return {
      activeindex: 2, // 步骤条
      activeBtnFlag: false, // 获取验证码样式
      dynamicTags: [], // 选座位
      focusInpPhone: false, // 输入手机号样式
      focusInpVerify: false, // 输入验证码样式
      xseatFlag: false, // 是否已经选座
      isLogin: false, // 是否登录
      phone: null, // 手机号
      price: 36.5, // 单价
      totalprice: 0, // 总价
    };
  },

  methods: {
    toOrder() {
      //跳转订单页
      if (this.xseatFlag) {
        this.$router.push({ name: "Order" });
      }
    },
    // 删除标签
    handleClose(tag) {
      // console.log(tag)
      let re1 = /(\d{1,3})+(?:\.\d+)?/g;
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      bus.$emit(
        "deltags",
        Number(tag.match(re1)[0]) - 1,
        Number(tag.match(re1)[1]) - 1
      );
    },
    // 判断手机号
    getPhone() {
      this.activeBtnFlag = /^1[345678][0-9]{9}$/.test(this.phone);
    },
    // 根据 tags 长度 , 判断是否显示标签
    changeXseatFlag() {
      this.xseatFlag = !!this.dynamicTags.length;
      this.totalprice = this.price * this.dynamicTags.length;
    },
  },

  created() {
    this.changeXseatFlag();

    // 改变标签
    bus.$on("changetags", (val, flag) => {
      if (flag) {
        this.dynamicTags.push(val);
        this.changeXseatFlag();
      } else {
        this.dynamicTags = this.dynamicTags.filter((item) => {
          return item != val;
        });
        this.changeXseatFlag();
      }
    });
  },

  components: {
    Steps,
    Seats,
    Head,
    Footer,
  },
};
</script>
